<template>
    
    <lay-notice-bar leftIcon="layui-icon-mute" 
        rightIcon="layui-icon-close" 
        text="只能先绑定信息才能再做后续操作" 
        mode="closeable" background="#ffff"	></lay-notice-bar>
    <div class="function-list-container">
        <ul class="function-list">
            <li
                class="function-item"
                @click="goToPage('bind-info')"
            >
                <span class="function-item-icon">
                    <van-icon name="edit" />
                </span>
                <span class="function-item-text">信息绑定</span>
                <!-- 添加小标签，仅在第一个列表项显示 -->
                <span class="function-item-tag">
                    <lay-tag :type="bindZhjyStatus? 'normal' : 'danger' " variant="light">{{ bindZhjyStatus ? ' 通过' : '未通过' }}</lay-tag>
                
                
                </span>
            </li>
            <lay-transition>
                <div v-if="bindZhjyStatus">
                    <li 
                    v-for="(item, index) in functionList"
                    :key="index"
                    class="function-item"
                    @click="goToPage(item.pageName)"
                >
                    <span class="function-item-icon">
                        <van-icon :name="item.icon" />
                    </span>
                    <span class="function-item-text">{{ item.name }}</span>
                </li>
                </div>
               
            </lay-transition>
        </ul>
    </div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue';
import RouterPath from '@/constans/RouterPath.js'
import { router, Link  } from '@inertiajs/vue3'; 
import { usePage } from '@inertiajs/vue3';

const bindZhjyStatus = ref(false)

const functionList = ref([

    {
        name: '签到打卡',
        pageName:'sign-in',
        icon: 'completed-o'
    },
    {
        name: '日志上传',
        pageName: 'log-upload',
        icon: 'calendar-o'
    },
    {
        name: '文件管理',
        pageName: 'image-upload',
        icon: 'upgrade'
    },
    {
        name: '地址管理',
        pageName: 'gallery-management',
        icon: 'setting-o'
    },
    {
        name: '任务管理',
        pageName: 'job-management',
        icon: 'clock-o'
    },
]);

const goToPage = (pageName) => {
    router.visit(RouterPath.users.indexInfo(pageName));
};


onMounted(()=>{
    try {
        const page = usePage();
        const pageData = page.props.result.original.data
        const dawn_zhjyStatus = pageData['dawn_zhjyStatus']
        if (dawn_zhjyStatus == 0){
            bindZhjyStatus.value = true
        }else{
            bindZhjyStatus.value = false
        }
    } catch (error) {
        bindZhjyStatus.value = false
    }
    
})

</script>

<style scoped>
.function-list-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    background-color: #f4f4f4;
    padding: 20px;
}

.function-list-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin-bottom: 30px;
}

.function-list {
    list-style: none;
    padding: 0;
    width: 100%;
    max-width: 600px;
}

.function-item {
    display: flex;
    align-items: center;
    background-color: white;
    /* 增大内边距 */
    padding: 20px 30px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.function-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.function-item-icon {
    font-size: 28px;
    margin-right: 20px;
    color: #666;
    vertical-align: middle; 
    display: flex;
    align-items: center;
}

.function-item-text {
    font-size: 20px;
    font-weight: 500;
    color: #333;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    max-width: 250px; 
    vertical-align: middle; 
    display: flex;
    align-items: center;
}

/* 新增的小标签样式 */
.function-item-tag {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 4px;
    color: white;
    font-size: 12px;
    font-weight: 500;
}


.tag-demo {
  width: 500px;
  display: flex;
  margin-bottom: 15px;
}
.tag-demo .layui-tag{
  margin-right: 15px;
}
.tag-demo-variant{
  margin-bottom: 10px;
}
</style>